<template>
  <section class="page letter-template">
    <data-form :model="dataModel" @onSearch="refreshData">
      <template slot="inputs">
        <el-form-item label="模板编号" prop="templateCode">
          <el-input v-model="dataModel.templateCode"></el-input>
        </el-form-item>
        <el-form-item label="模板名称" prop="templateName">
          <el-input v-model="dataModel.templateName"></el-input>
        </el-form-item>
        <el-form-item label="模板状态" prop="templateStatus">
          <el-select v-model="dataModel.templateStatus" placeholder="请选择" clearable>
            <el-option v-for="{index,name,code} in $dict.getDictData('CommonState')" :key="index" :label="name" :value="code"></el-option>
          </el-select>
        </el-form-item>
      </template>
    </data-form>

    <data-box @onPageChange="refreshData" :data="templateDataSet" :page="pageService">
      <template slot="buttons">
        <el-button @click="selectedRow = null, dialog.modify = true">新增模板</el-button>
      </template>
      <!--数据列区域-->
      <template slot="columns">
        <el-table-column label="操作" :min-width="$helper.getColumnWidth(3)">
          <template slot-scope="scope">
            <el-button type="text" @click="selectedRow = scope.row, dialog.modify = true">修改</el-button>
            <el-button type="text" @click="deleteTemplate(scope.row)">删除</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="templateCode" label="模板编号" :min-width="$helper.getColumnWidth(2)">
        </el-table-column>
        <el-table-column prop="templateName" label="模板名称" :min-width="$helper.getColumnWidth(3)">
        </el-table-column>
        <el-table-column prop="overduePeriod" label="逾期阶段" :min-width="$helper.getColumnWidth(3)" :formatter="(row) => $filter.encryptOverduePeriodStatus(row.overduePeriod)">
        </el-table-column>
        <el-table-column prop="isDefault" label="是否默认" :min-width="$helper.getColumnWidth(3)" :formatter="(row) => $filter.dictConvert(row.isDefault, 'CommonFlag')">
        </el-table-column>
        <el-table-column prop="templateStatus" label="状态" :formatter="(row) => $filter.dictConvert(row.templateStatus,'CommonState')" :min-width="$helper.getColumnWidth(3)">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" :formatter="(row) => $filter.dateTimeFormat(row.createTime)" :min-width="$helper.getColumnWidth(3)">
        </el-table-column>
        <el-table-column prop="operatorRealName" label="操作人" :min-width="$helper.getColumnWidth(3)">
        </el-table-column>
      </template>
    </data-box>

    <!--新增/修改模板配置-->
    <el-dialog title="信函模板配置" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" :visible.sync="dialog.modify" @open="$nextTick(() => $refs['letter-template-config'].refresh())">
      <letter-template-config ref="letter-template-config" :data="selectedRow" @refreshData="refreshData" @close="dialog.modify = false"></letter-template-config>
    </el-dialog>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Auth, Layout, Dependencies } from "~/core/decorator";
import { PageService } from "~/utils/page.service";
import { SortService } from "~/utils/sort.service";
import { TemplateService } from "~/services/domain-service/template.service";
import DataForm from "~/components/common/data-form.vue";
import DataBox from "~/components/common/data-box.vue";
import LetterTemplateConfig from '~/components/template-manage/letter-template/letter-template-config.vue'

@Layout("workspace")
@Component({
  components: {
    DataBox,
    DataForm,
    LetterTemplateConfig,
  }
})
export default class LetterTemlate extends Vue {
@Dependencies(SortService) 
  private sortService: SortService;
  @Dependencies(PageService) 
  private pageService: PageService;
  @Dependencies(TemplateService) 
  private templateService: TemplateService;

  private templateDataSet: any[] = [];

  private dialog: any = {
    modify: false
  }

  private selectedRow: any = null

  private dataModel: any = {
    templateName: '',
    templateCode: '',
    templateStatus: '',
    templateCategory: 'LETTER',
  }

  private mounted() {
    this.refreshData()
  }

  private refreshData() {
    this.templateService.getTemplatesByCondition(
        this.dataModel,
        this.pageService
      ).subscribe(
        data => this.templateDataSet = data
      )
  }
  
  private deleteTemplate(rowData) {
    this.$confirm(`您确定要删除该模板吗？`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(() => {
      this.templateService.deleteTemplateById(rowData.id)
        .subscribe((data) => {
          this.$message.success('删除成功');
          this.refreshData();
        });
    });
  }
}
</script>
<style scoped lang="less">
</style>